import Pagination from '@/components/pagination'
import Table from '@/components/table'
import columns from './column'
import styles from './index.module.less'
import { getAccountList } from '@/api/admin'
import { useSetState } from 'ahooks'
import { useEffect, useState } from 'react'
import { useRecoilValue } from 'recoil'
import { userinfo } from '@/store'
import { applyNumber } from '@/store'
import { useSetRecoilState } from 'recoil'
import { getApplyNumber } from '@/api/admin'

const Index = () => {
  const setApplyNumber = useSetRecoilState(applyNumber)

  const updateAppleNumbers = async () => {
    const res = await getApplyNumber()
    setApplyNumber(res.data.total || 0)
  }

  const user = useRecoilValue(userinfo)
  const [pagination, setPagination] = useSetState({
    page: 1,
    pageSize: 30,
    total: 0,
  })
  const [list, setList] = useState(null)
  const fetchData = async () => {
    const res = await getAccountList({ page: pagination.page, pageSize: pagination.pageSize })
    if (!res.code) {
      setPagination({ total: res.data.total })
      setList(res.data.list)
    }
  }

  useEffect(() => {
    fetchData()
  }, [pagination.page])

  return (
    <div className={styles.home}>
      <Table columns={columns(user, updateAppleNumbers)} dataSource={list} className={styles.table} />
      {pagination.total > 30 && (
        <Pagination total={pagination.total} onChange={(page) => setPagination({ page })} className="mt-7" />
      )}
    </div>
  )
}

export default Index
